<template>
  <el-container>
    <el-main>
      <el-card class="milestones-card">
        <h2>大事记</h2>
        <el-timeline>
          <!-- 2023 年 3 月 4 日第一个版本主页 -->
          <el-timeline-item
              timestamp="2023.3.4"
              placement="top"
              type="primary"
          >
            第一个版本的主页发布
          </el-timeline-item>
          <!-- 2023 年 3 月 6 日第二个版本主页 -->
          <el-timeline-item
              timestamp="2023.3.6"
              placement="top"
              type="success"
          >
            第二个版本的主页发布
          </el-timeline-item>
          <!-- 2025 年 3 月 14 日立项更新主页 -->
          <el-timeline-item
              timestamp="2025.3.14"
              placement="top"
              type="warning"
          >
            立项，正式决定更新两年没动的主页
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
// 这里没有额外的逻辑，仅作为 Vue 3 组合式 API 的写法示例
</script>

<style scoped>
.milestones-card {
  max-width: 800px;
  margin: 0 auto;
}

/* 可以添加一些额外的样式来美化时间线 */
.el-timeline-item {
  margin-bottom: 20px;
}
</style>